<template>
    <div class="footerBox">
        <div class="footer">
          <ul>
            <li>
              <router-link to="/" v-slot="{ isActive }">
                <img :src="isActive ? '/assets/images/f01.png': '/assets/images/f1.png'">
                <p :class="{ titlecolor: isActive }">首页</p>
              </router-link>
            </li>
            <li>
              <router-link to="/category/index" v-slot="{ isActive }">
                <img :src="isActive ? '/assets/images/f02.png': '/assets/images/f2.png'">
                <p :class="{ titlecolor: isActive }">分类</p>
              </router-link>
            </li>
            <li>
              <router-link to="/find/index" v-slot="{ isActive }">
                <img src="/assets/images/faxian.png">
                <p :class="{ titlecolor: isActive }">发现</p>
              </router-link>
            </li>
            <li>
              <router-link to="/team/index" v-slot="{ isActive }">
                <img :src="isActive ? '/assets/images/f03.png': '/assets/images/f3.png'">
                <p :class="{ titlecolor: isActive }">拼团</p>
              </router-link>
            </li>
            <li>
              <router-link to="/gwc/index" v-slot="{ isActive }">
                <img :src="isActive ? '/assets/images/f03.png': '/assets/images/f3.png'">
                <p :class="{ titlecolor: isActive }">购物车</p>
              </router-link>
            </li>
            <li>
              <router-link to="/business/index" v-slot="{ isActive }">
                <img :src="isActive ? '/assets/images/f04.png': '/assets/images/f4.png'">
                <p :class="{ titlecolor: isActive }">我的</p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
</template>

<style scoped>
.footerBox .footer ul li .titlecolor{
  color: #fe7923;
}
.footerBox .footer ul li{
  width: 15%;
}
</style>